<?php echo $this->Html->css('imgareaselect/imgareaselect-default', 'stylesheet', array('inline' => false)); ?>
<?php echo $this->Html->script('jquery.imgareaselect.min', array('inline' => false)); ?>
<?php $this->Html->scriptStart(array('inline' => false)) ?>
$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        handles: true,
        aspectRatio: '1:1',
        //persistent: true,
        
         onSelectEnd: function (img, selection) {
         $.ajax({
			'url': '<?php echo $this->Html->url(array('controler' => 'filters', 'action' => 'extract')) ?>',
			'data': {'x': selection.x1, 'y': selection.y1, 'size': selection.width},
			'success': function() {
				$('#extract').attr('src', '<?php echo $this->Html->url('/img/filters/extract.jpg', true) ?>' + '?nocache=' + (new Date().getTime()));
			}
		});
        //alert('width: ' + selection.width + '; height: ' + selection.height);
        console.log(selection);
    }
    });
});
<?php echo $this->Html->scriptEnd() ?>
<?php echo $this->Html->image('filters/upload.jpg', array('id' => 'photo', 'width' => 500)) ?>
<?php echo $this->Html->image('filters/upload.jpg', array('id' => 'extract', 'width' => 500, 'style' => 'margin-left: 100px;')) ?>
